<template>
  <div class="caseRateConfig">
    <div class="rateBoxAll" v-if="showFlag">
      <div class="rateBox">
        <h3>
          {{ configData && configData.name ? configData.name : '' }}（C）
          <span @click="bj(`${configData.name}C级配置`, configData.levelC.assessItems)">编辑</span>
          <rate-list :listData="configData ? configData.levelC.assessItems : []"></rate-list>
        </h3>
      </div>
      <div class="rateBox">
        <h3>
          {{ configData ? configData.name : '' }}（B）
          <span @click="bj(`${configData.name}B级配置`, configData.levelB.assessItems)">编辑</span>
          <rate-list :listData="configData ? configData.levelB.assessItems : []"></rate-list>
        </h3>
      </div>
      <div class="rateBox">
        <h3>
          {{ configData ? configData.name : '' }}（A）
          <span @click="bj(`${configData.name}A级配置`, configData.levelA.assessItems)">编辑</span>
          <rate-list :listData="configData ? configData.levelA.assessItems : []"></rate-list>
        </h3>
      </div>
    </div>
    <div v-else>暂无数据</div>
    <rate-config-edit ref="rateConfigEditRef" @updateDate="updateDate"></rate-config-edit>
  </div>
</template>
<script setup>
  import rateList from './rateList.vue'
  import rateConfigEdit from './rateConfigEdit.vue'
  import { ref, defineEmits, reactive } from 'vue'
  const configData = ref({
    name: '',
    levelA: {},
    levelB: {},
    levelC: {}
  })
  const showFlag = ref(false)
  const emit = defineEmits(['updateAll'])
  function updateDate() {
    emit('updateAll')
    showFlag.value = false
  }
  const rateConfigEditRef = ref(null)
  function show(val) {
    configData.value = val
    showFlag.value = true
  }
  function bj(title, val) {
    rateConfigEditRef.value.show(title, val)
  }
  defineExpose({
    show
  })
</script>
<style lang="scss" scoped>
  .caseRateConfig {
    .rateBoxAll {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .rateBox {
        padding: 0 30px;
        width: 33.33%;

        h3 {
          span {
            font-weight: normal;
            color: #2d8cf0;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>

<!-- <template>
  <div class="caseRateConfig">
    <div class="rateBoxAll" v-if="showFlag">
      <div class="rateBox">
        <h3>
          {{ configData ? configData.name : '' }}（C）
          <span @click="bj(`${configData.name}C级配置`, configData.levelC.assessItems)">编辑</span>
          <rate-list :listData="configData ? configData.levelC.assessItems : []"></rate-list>
        </h3>
      </div>
      <div class="rateBox">
        <h3>
          {{ configData ? configData.name : '' }}（B）
          <span @click="bj(`${configData.name}B级配置`, configData.levelB.assessItems)">编辑</span>
          <rate-list :listData="configData ? configData.levelB.assessItems : []"></rate-list>
        </h3>
      </div>
      <div class="rateBox">
        <h3>
          {{ configData ? configData.name : '' }}（A）
          <span @click="bj(`${configData.name}A级配置`, configData.levelA.assessItems)">编辑</span>
          <rate-list :listData="configData ? configData.levelA.assessItems : []"></rate-list>
        </h3>
      </div>
    </div>
    <div v-else>暂无数据</div>
    <rate-config-edit ref="rateConfigEdit" @updateDate="updateDate"></rate-config-edit>
  </div>
</template>
<script>
  import rateList from './rateList.vue'
  import rateConfigEdit from './rateConfigEdit.vue'
  export default {
    name: 'rate',
    components: {
      rateList,
      rateConfigEdit
    },
    data() {
      return {
        configData: {},
        showFlag: false
      }
    },
    methods: {
      updateDate() {
        this.$emit('updateAll')
        this.showFlag = false
      },
      bj(title, val) {
        this.$refs.rateConfigEdit.show(title, val)
      },
      show(val) {
        this.configData = val
        this.showFlag = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .caseRateConfig {
    .rateBoxAll {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .rateBox {
        padding: 0 30px;
        width: 33.33%;

        h3 {
          span {
            font-weight: normal;
            color: #2d8cf0;
            cursor: pointer;
          }
        }
      }
    }
  }
</style> -->
